<template lang="html">
  <div class="UploadFile">
    <Modal v-model="showModel" 
    :closable="false" 
    :mask-closable="false" 
    :footer-hide="true" 
    :title="status">
      <p>正在上传中</p>
    </Modal>
    <div class="ivu-upload ivu-upload-select">
      <input v-show="false" ref="input" type="file" @change="handleChange">
      <button  @click="handleClick" type="button" class="ivu-btn ivu-btn-default file-name" :disabled='isDisabled'>
        <span v-show="fileShow" :title="upName">{{decodeURIComponent(upName.substring(5,upName.lastIndexOf('?'))) | capitalize}}</span>
        <span v-show="upFile" :title="fileName">{{fileName}}</span>
      </button>
    </div>
    <!-- {{UploadFileName}}
    {{UploadFileId}} -->
  </div>
</template>

<script>
  export default {
    name: 'UploadFile',
    props: {
      UploadFileName: null,
      UploadFileId: null,
      isDisabled: {
        default: false
      },
      upName: null
    },
    filters: {
      capitalize: function (value) {
        // console.log(value)
        if (value == null || value == ''){
          return '上传'
        } else{
          return value
        }
      }
    },
    data() {
      return {
        status: '上传',
        showModel: false,
        // 支持的文件后缀名
        canExt: [
          '.bmp',
          '.png',
          '.pdf',
          '.jpg',
          '.jpeg',
          '.docx',
          '.doc',
          '.csv',
          '.zip',
          '.xlsx',
          '.xls',
          '.rar',
          '.AVI',
          '.FLV',
          '.mp4',
          '.rm',
          '.mov'
        ],
        fileName: '',
        fileShow: true,
        upFile: false
      }
    },
    mounted() {
    },
    methods: {
      handleClick() {
        this.$refs.input.click()
      },
      handleChange(e) {
        let file = e.target.files[0]
        if (!file) {
          return
        }
        // 获取文件扩展名
        let name = file.name,
          canExt = this.canExt,
          ext = name.substring(name.lastIndexOf('.'))
        if (canExt.indexOf(ext) == -1) {
          this.$Message.error('不支持此格式')
          this.$refs.input.value = null
          return
        }

        this.post(file)
      },
      post(file) {
        this.$Loading.start();
        this.showModel = true
        this.status = '上传中'

        // console.log(file)

        // let formdata = new FormData()
        // formdata.append('file', file)
        // formdata.append('id', this.UploadFileId)
        // formdata.append('key', this.UploadFileName)

        // axios.post('/fileUpload/uploadAvatar', formdata).then((res) => {
        //           //   this.$Message.success('上传完成')
        // //   this.$Loading.finish();
        // //   this.showModel = false
        // }).catch((res) => {
        // })


        let formdata = {
          File: file,
          Id: this.UploadFileId,
          Key: this.UploadFileName,
        }

        this.$uploadFile('/fileUpload/uploadAvatar',formdata,{}).then(res=>{
          console.log(res)
          this.$Message.success('上传完成')
          this.$Loading.finish();
          this.showModel = false
          this.status = file.name
          this.$emit('input', '1111')
          this.fileName = file.name
          this.fileShow = false
          this.upFile = true
          // console.log(this.fileName)
          this.$emit('fileInfo',this.fileName)

        }).catch(err=>{
          // 上传失败，模态框取消，提示原因，请重试！
          console.log(err)
          this.showModel = false
          this.$Message.err('网络错误，上传失败，请重试！')
        })
        // this.$Loading.start();
        // this.showModel = true
        // this.status = '上传中'
        // let formdata = new FormData()
        // formdata.append('file', file)
        // // let formdata = {
        // //   file: fileData,
        // //   id: this.UploadFileId,
        // //   key: this.UploadFileName,
        // // }
        // // formdata.append('file', file)
        // formdata.append('id', this.UploadFileId)
        // formdata.append('key', this.UploadFileName)
        // // var upData = {
        // //   id: this.UploadFileId,
        // //   key: this.UploadFileName
        // // }
        // // return
        // // console.log(formdata.get('file'))
        // // console.log(formdata.get('id'),"---",formdata.get('key'))
        // const instance=axios.create({
        //   withCredentials: true
        // })
        // // axios.post('/fileUpload/uploadAvatar', formdata).then((res) => {
        // instance.post('fileUpload/upLoad', formdata).then((res) => {
        //   this.$Message.success('上传完成')
        //   this.$Loading.finish();
        //   this.showModel = false
        //   this.status = file.name
        //   this.$emit('input', '1111')
        //   this.fileName = file.name
        //   this.fileShow = false
        //   this.upFile = true
        //   // console.log(this.fileName)
        //   this.$emit('fileInfo',this.fileName)
        //   // this.$emit('input', res.path)
        //   // console.log(file.name);
        // })
      },
    },
  }
</script>

<style lang="css">
.file-name{
  width: 100px;
  overflow: hidden;
  text-overflow:ellipsis; 
  white-space: nowrap;
}
</style>